<template>
  <div>
    <vxe-grid v-bind="gridOptions"></vxe-grid>
  </div>
</template>

<script lang="ts" setup>
  import { VxeFormItemProps, VxeGridPropTypes } from '@/components/VxeTable';
  import { reactive, h } from 'vue';
  import type { VxeGridProps } from 'vxe-table';
  import { Tag } from 'ant-design-vue';
  import { mouldListApi } from '@/api/sys/msUser';
  interface RowVO {
    id: number;
    name: string;
    nickname: string;
    role: string;
    sex: string;
    age: number;
    address: string;
  }

  const list = [
    {
      id: 10001,
      name: 'Test1',
      nickname: 'T1',
      role: 'Develop',
      sex: 'Man',
      age: 28,
      address: 'Shenzhen',
    },
    {
      id: 10002,
      name: 'Test2',
      nickname: 'T2',
      role: 'Test',
      sex: 'Women',
      age: 22,
      address: 'Guangzhou',
    },
    {
      id: 10003,
      name: 'Test3',
      nickname: 'T3',
      role: 'PM',
      sex: 'Man',
      age: 32,
      address: 'Shanghai',
    },
    {
      id: 10004,
      name: 'Test4',
      nickname: 'T4',
      role: 'Designer',
      sex: 'Women',
      age: 23,
      address: 'test abc',
    },
    {
      id: 10005,
      name: 'Test5',
      nickname: 'T5',
      role: 'Develop',
      sex: 'Women',
      age: 30,
      address: 'Shanghai',
    },
    {
      id: 10006,
      name: 'Test6',
      nickname: 'T6',
      role: 'Designer',
      sex: 'Women',
      age: 21,
      address: 'Shenzhen',
    },
    {
      id: 10007,
      name: 'Test7',
      nickname: 'T7',
      role: 'Test',
      sex: 'Man',
      age: 29,
      address: 'Shenzhen',
    },
    {
      id: 10008,
      name: 'Test8',
      nickname: 'T8',
      role: 'Develop',
      sex: 'Man',
      age: 35,
      address: 'test abc',
    },
    {
      id: 10009,
      name: 'Test9',
      nickname: 'T9',
      role: 'Develop',
      sex: 'Man',
      age: 35,
      address: 'Shenzhen',
    },
    {
      id: 100010,
      name: 'Test10',
      nickname: 'T10',
      role: 'Develop',
      sex: 'Man',
      age: 35,
      address: 'Guangzhou',
    },
    {
      id: 100011,
      name: 'Test11',
      nickname: 'T11',
      role: 'Develop',
      sex: 'Man',
      age: 49,
      address: 'Guangzhou',
    },
    {
      id: 100012,
      name: 'Test12',
      nickname: 'T12',
      role: 'Develop',
      sex: 'Women',
      age: 45,
      address: 'Shanghai',
    },
    {
      id: 100013,
      name: 'Test13',
      nickname: 'T13',
      role: 'Test',
      sex: 'Women',
      age: 35,
      address: 'Guangzhou',
    },
    {
      id: 100014,
      name: 'Test14',
      nickname: 'T14',
      role: 'Test',
      sex: 'Man',
      age: 29,
      address: 'Shanghai',
    },
    {
      id: 100015,
      name: 'Test15',
      nickname: 'T15',
      role: 'Develop',
      sex: 'Man',
      age: 39,
      address: 'Guangzhou',
    },
    {
      id: 100016,
      name: 'Test16',
      nickname: 'T16',
      role: 'Test',
      sex: 'Women',
      age: 35,
      address: 'Guangzhou',
    },
    {
      id: 100017,
      name: 'Test17',
      nickname: 'T17',
      role: 'Test',
      sex: 'Man',
      age: 39,
      address: 'Shanghai',
    },
    {
      id: 100018,
      name: 'Test18',
      nickname: 'T18',
      role: 'Develop',
      sex: 'Man',
      age: 44,
      address: 'Guangzhou',
    },
    {
      id: 100019,
      name: 'Test19',
      nickname: 'T19',
      role: 'Develop',
      sex: 'Man',
      age: 39,
      address: 'Guangzhou',
    },
    {
      id: 100020,
      name: 'Test20',
      nickname: 'T20',
      role: 'Test',
      sex: 'Women',
      age: 35,
      address: 'Guangzhou',
    },
    {
      id: 100021,
      name: 'Test21',
      nickname: 'T21',
      role: 'Test',
      sex: 'Man',
      age: 39,
      address: 'Shanghai',
    },
    {
      id: 100022,
      name: 'Test22',
      nickname: 'T22',
      role: 'Develop',
      sex: 'Man',
      age: 44,
      address: 'Guangzhou',
    },
    {
      id: 100019,
      name: 'Test23',
      nickname: 'T23',
      role: 'Develop',
      sex: 'Man',
      age: 39,
      address: 'Guangzhou',
    },
    {
      id: 100020,
      name: 'Test24',
      nickname: 'T24',
      role: 'Test',
      sex: 'Women',
      age: 38,
      address: 'Guangzhou',
    },
    {
      id: 100021,
      name: 'Test25',
      nickname: 'T25',
      role: 'Test',
      sex: 'Man',
      age: 37,
      address: 'Shanghai',
    },
    {
      id: 100022,
      name: 'Test26',
      nickname: 'T26',
      role: 'Develop',
      sex: 'Man',
      age: 44,
      address: 'Guangzhou',
    },
    {
      id: 100019,
      name: 'Test27',
      nickname: 'T27',
      role: 'Develop',
      sex: 'Man',
      age: 55,
      address: 'Guangzhou',
    },
    {
      id: 100020,
      name: 'Test28',
      nickname: 'T28',
      role: 'Test',
      sex: 'Women',
      age: 51,
      address: 'Guangzhou',
    },
    {
      id: 100021,
      name: 'Test29',
      nickname: 'T29',
      role: 'Test',
      sex: 'Man',
      age: 48,
      address: 'Shanghai',
    },
  ];

  // 模拟接口
  const findPageList = (pageSize: number, currentPage: number, filterList: any[]) => {
    const filterItem = filterList[0];
    const filterRoles = filterItem ? filterItem.values : [];
    // console.log(`调用查询接口 pageSize=${pageSize} currentPage=${currentPage}`);
    if (filterItem) {
      console.log(`筛选参数 ${filterItem.field}=${filterItem.values}}`);
    }
    return new Promise<{
      result: RowVO[];
      page: {
        total: number;
      };
    }>((resolve) => {
      let form = {};
      if (filterList && filterList.length) {
        filterList.forEach((e) => {
          const value = e.datas[0];
          let field = e.field;
          form[field + 'Like'] = value;
        });
      }
      let paremts = {
        page: currentPage,
        pageSize,
        IfXuNiJian: 1,
        ...form,
      };
      mouldListApi(paremts).then((res) => {
        let resultObj = {
          result: res.data.list,
          page: {
            total: res.data.totalResult,
          },
        };
        resolve(res);
      });
    });
  };

  const vxeTableColumns: VxeGridPropTypes.Columns = [
    {
      title: '型号',
      field: 'mouldName',
      showOverflow: 'title',
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
      width: 140,
    },
    {
      title: '物料名称',
      field: 'materialName',
      showOverflow: 'title',
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
      width: 140,
    },
    {
      title: '物料规格',
      field: 'specification',
      showOverflow: 'title',
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
      width: 140,
    },
    // {
    //   title: '单号',
    //   field: 'orderNo',
    //   align: 'center',
    //   width: 140,
    //
    // },
    {
      title: '金额',
      field: 'price',
      align: 'center',
      width: 100,
    },

    {
      title: '供应商名称',
      field: 'supplierName',
      showOverflow: 'title',
      width: 200,

      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
    },

    {
      title: '开始日期',
      field: 'startDate',
      align: 'center',
      // sortable: true,
      width: 100,
    },
    {
      title: '结束日期',
      field: 'endDate',
      align: 'center',
      // sortable: true,
      width: 100,
    },
    {
      title: '退款条件类别',
      field: 'returnConditionType',
      align: 'center',
      width: 90,
      slots: {
        default: ({ row }) => {
          const type = row.returnConditionType;
          let text = '';
          switch (type) {
            case 1:
              text = '一次性(数量)';
              break;
            case 2:
              text = '累计(数量)';
              break;
            case 3:
              text = '不退';
              break;
            case 4:
              text = '一次性(金额)';
              break;
            case 5:
              text = '累计(金额)';
              break;
          }
          // return text;
          return h(Tag, null, () => text);
        },
      },
    },
    {
      title: '退款条件数量/金额',
      width: 80,
      field: 'returnConditionNum',
    },
    {
      title: '已累计数量下单数量/金额',
      width: 80,
      field: 'totalNum',
    },

    {
      title: '是否符合退款条件',
      field: 'isReturn',
      align: 'center',
      width: 100,
      slots: { default: 'isReturn_default' },
    },
    {
      title: '是否关闭',
      field: 'isClose',
      align: 'center',

      width: 80,
      slots: {
        default({ row }) {
          const type = row.isClose;
          let text = '';
          let color = '';
          switch (type) {
            case 0:
              text = '否';
              break;
            case 1:
              text = '是';
              color = 'red';
              break;
          }
          return h(Tag, { color }, () => text);
        },
      },
    },
    // {
    //   title: '人员类型',
    //   dataIndex: 'userType',
    //   width: 100,
    //   align: 'center',
    //   slots: {
    //     default: ({ row }) => {
    //       const type = row.userType;
    //       let text="";
    //       switch (type) {
    //         case 1:
    //           text="采购员";
    //           break;
    //         case 2:
    //           text="研发制样员";
    //           break;
    //       }
    //       // return text;
    //       return h(Tag, null, () => text);
    //     },
    //   }
    // },
    {
      title: '经办人',
      field: 'userName',
      showOverflow: 'title',
      align: 'center',
      filters: [{ data: '' }],
      filterRender: {
        name: 'VxeInput',
      },
      width: 100,
    },
    {
      title: '提请人',
      field: 'createUserName',
      align: 'center',

      width: 100,
    },
    {
      title: '创建时间',
      field: 'createTime',
      align: 'center',

      width: 150,
    },
    {
      width: 150,
      title: '操作',
      align: 'center',
      field: '',
      slots: { default: 'action' },
      fixed: 'right',
    },
  ];

  const vxeTableFormSchema: VxeFormItemProps[] = [
    {
      span: 6,
      field: 'keyword',
      title: '查询',
      itemRender: {
        props: {
          placeholder: '型号/物料名称/物料规格/供应商名称/经办人名称',
        },
        name: 'AInput',
      },
    },
    {
      span: 5,
      field: 'isClose',
      title: '是否关闭',
      itemRender: {
        name: 'ASelect',
        defaultValue: 0,
        props: {
          options: [
            { label: '是', value: 1 },
            { label: '否', value: 0 },
          ],
        },
      },
    },
    {
      span: 5,
      itemRender: {
        name: 'VxeButtonGroup',
        options: [
          { type: 'reset', content: '重置' },
          { type: 'submit', content: '查询', status: 'primary' },
        ],
      },
    },
  ];

  const gridOptions = reactive<VxeGridProps<RowVO>>({
    border: true,
    showOverflow: true,
    height: 500,
    filterConfig: {
      remote: true,
    },
    pagerConfig: {},
    toolbarConfig: {
      buttons: [
        { code: 'query', name: '点击查询（不重置条件）' },
        { code: 'reload', name: '点击刷新（重置条件）' },
      ],
      refresh: true,
    },
    formConfig: {
      items: vxeTableFormSchema,
    },
    proxyConfig: {
      props: {
        result: 'data.list',
        list: 'data.list',
        total: 'data.totalResult',
        message: 'message',
      },
      filter: true, // 启用筛选请求代理
      ajax: {
        query: ({ page, filters }) => {
          // 默认接收 Promise<{ result: [], page: { total: 100 } }>
          return findPageList(page.pageSize, page.currentPage, filters);
        },
      },
    },
    columns: vxeTableColumns,
  });
  let columns = [
    { type: 'seq', width: 70 },
    { field: 'name', title: 'Name' },
    { field: 'nickname', title: 'Nickname' },
    {
      field: 'role',
      title: 'Role',
      filters: [
        { label: 'Develop', value: 'Develop' },
        { label: 'Test', value: 'Test' },
        { label: 'PM', value: 'PM' },
        { label: 'Designer', value: 'Designer' },
      ],
    },
    { field: 'address', title: 'Address' },
  ];
</script>
